<template>
  <view>
    <!-- 商品列表 开始 -->
    <scroll-view v-if="shouCang.length > 0" class="goods" scroll-y="true" lower-threshold="50" @scrolltolower="getGoodsList">
      <view class="good" v-for="(item, index) in shouCang" :key="item.goods_id">
        <navigator :url="'../../pages/goods_detail/goods_detail?goods_id=' + item.goods_id" open-type="navigate">
          <view class="good_box">
            <view class="good_logo">
              <!-- 商品LOGO -->
              <image :src="item.goods_small_logo == '' ? 'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg' : item.goods_small_logo" mode="widthFix"></image>
            </view>
            <view class="good_info">
              <text class="good_name">
                <!-- 商品名称 -->
                {{ item.goods_name }}
              </text>
              <text class="good_price">
                <!-- 商品价格 -->
                ¥ {{ item.goods_price }}
              </text>
            </view>
          </view>
        </navigator>
      </view>
    </scroll-view>
    <!-- 商品列表 结束 -->
    <view v-else class="shouChang_none">没有收藏商品</view>
  </view>
</template>

<script>
export default {
  onShow() {
    var _me = this;
    _me.shouCang = uni.getStorageSync('shoucang') || [];
  },
  data() {
    return {
      shouCang: []
    };
  }
};
</script>

<style lang="scss">
/* 商品列表 开始 */
scroll-view.goods {
  width: 100%;
  height: 100%;
  .good {
    width: 100%;
    justify-content: center;
    .good_box {
      width: 100%;
      height: 80%;
      display: flex;
      padding: 20rpx 0;
      // border: 1rpx dashed #0000ff;
      .good_logo {
        flex: 3;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        // border: 1rpx dashed #ff0000;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .good_info {
        flex: 7;
        .good_name {
          display: inline-block;
          width: 100%;
          height: 70%;
          font-size: 30rpx;
          padding-left: 10rpx;
          // border: 1rpx dashed #ff00ff;
        }
        .good_price {
          display: inline-block;
          width: 100%;
          height: 30%;
          font-size: 45rpx;
          padding-left: 20rpx;
          color: #ff0000;
          // border: 1rpx dashed #ffff00;
        }
      }
    }
  }
}
/* 商品列表 结束 */
.shouChang_none {
  height: 500rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60rpx;
}
</style>
